import React from 'react';
import { Notebook } from '../../types/index';
import styles from './Review.module.css';

/* 笔记本选择器组件，props如下： 
-selectedNotebookId
-notebooksWithCards（有复习卡片的notebooks）
-onChange，函数类型，出现选择笔记本后的处理逻辑
*/
interface NotebookSelectorProps {
  selectedNotebookId: string | undefined;
  notebooksWithCards: Notebook[];
  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
}

const NotebookSelector: React.FC<NotebookSelectorProps> = ({ 
  selectedNotebookId, 
  notebooksWithCards, 
  onChange 
}) => (
  <div className={styles.notebookSelector}>
    <label>选择笔记本：</label>
    <select value={selectedNotebookId || "all"} onChange={onChange}>
      <option value="all">所有笔记本</option>
      {notebooksWithCards.map(notebook => (
        <option key={notebook.id} value={notebook.id}>
          {notebook.name}
        </option>
      ))}
    </select>
  </div>
);

export default NotebookSelector; 